<template>
  <div class="cart-box">
    <div :style="{height: toolbarHei +'px'}"></div>
    <nut-navbar title="提交购物车" left-text="返回" left-show @click-back="clickLeft"></nut-navbar>
    <div style="height:calc(100vh - 80px);overflow: auto;" v-if="state.cartList.length>0">
      <div >
        <div v-for="(it,index) in state.cartList" :key="index"
             style="background-color:white;border:1px solid rgba(0,0,0,0.05);border-radius:4px;margin-bottom:5px;"
        >
          <div style="padding:5px;display:flex;">
            <div style="font-size:16px;flex:1">{{it.buName}}</div>
            <div ><nut-price :price="it.amount"></nut-price></div>
          </div>
          <div class="cart-body" >
            <div
                v-for="(item, index) in it.goods" :key="index"
                style="margin-bottom:10px;background-color:white;"
            >
              <nut-swipe touch-move-stop-propagation touch-move-prevent-default>
                <div class="good-item">
                  <div style="padding-left:5px;padding-top:30px;width:30px;">
                    <nut-checkbox size="large" @change="change(it, item)" v-model="item.checked" label="复选框"></nut-checkbox>
                  </div>
                  <div class="good-img" style="margin-left:5px;">
                    <nut-image
                        :src="item.imageUrl"
                        width="80"
                        height="80"
                    />
                  </div>
                  <div class="good-desc">
                    <div class="good-title"  @click="altGood(it, item)">
                      {{ item.invName }}
                    </div>
                    <div style="text-align: right;padding-right: 10px;display:flex;"  @click="altGood(it, item)">
                      <div style="font-size:13px;">1 * {{item.spec}}</div>
                      <div style="flex:1;">
                        x <span class="qty"> {{item.qty}}</span> <span> {{item.unit}}</span>
                      </div>
                    </div>
                    <div  @click="altGood(it, item)">
                      <span v-if="item.send" style="color: #1e9fff;"> {{ item.send }}</span>
                      <span style="margin-left:5px;" v-if="item.deduction">返<nut-price :price="item.deduction" size="small" /></span>
                    </div>
                    <div class="good-btn">
                      <div >
                        <span  ><nut-price :price="item.price"></nut-price></span>
                      </div>
                      <nut-input-number
                          :min="1" :step="1"
                          @change="onChange(it, item, $event)"
                          @overlimit="overlimit(it, item, $event)"
                          v-model="item.qty"
                      />
                    </div>
                  </div>
                </div>
                <template #right>
                  <nut-button type="danger" plain  @click="deleteGood(item)" size="small"><Del /></nut-button>
                </template>
              </nut-swipe>
            </div>
          </div>
          <div style="text-align:right;padding: 10px">
            <nut-button size="small" @click="del(it)">清空</nut-button>
            <nut-button type="primary" :loading="state.submitLoading" size="normal" style="margin-left:50px;" @click="onSubmit(it)">提交订单</nut-button>
          </div>
        </div>
      </div>
    </div>
    <div class="empty" v-if="!state.cartList.length">
      <img class="empty-cart" src="https://s.yezgea02.com/1604028375097/empty-car.png" alt="空购物车">
      <div class="title">购物车空空如也</div>

    </div>
    <altgood top="80px" :buId="buId" ref="altRef" @altSuc="altSuc" />
  </div>
</template>

<script setup>
import {useGlobal} from "@/stores/useGlobal";
import pinia from "@/stores";
import tool from "@/utils/tool";
const global = useGlobal(pinia)
import { showDialog,    } from '@nutui/nutui';
import { Del } from '@nutui/icons-vue';
import altgood from "@/views/stock/cart/altgood.vue";
import {computed, nextTick, onActivated, reactive, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
const router = useRouter()
const route = useRoute()
const props = defineProps({
  buId: {type: [Number, String], default: 0},
  buName: {type: [Number, String], default: ''},
})
const emit = defineEmits(['goshop','changeCart','delCart'])
const state = reactive({
  checked: false,
  cartList: [],
  list: [],
  all: false,
  result: [],
  checkAll: true,
  submitLoading: false,
  refresh: false,
})
const altRef = ref(null)
const height = computed(() => {
  return window.innerHeight - 130
})
const toolbarHei = computed(() => {
  return global.statusBarHeight
})
const totalAmount = computed(() => {
  let ret = []
  for (let i = 0; i < state.list.length; i++) {
    if(state.result.indexOf(state.list[i].id) !== -1) {
      ret.push(state.list[i])
    }
  }
  return tool.xe.sum(ret, 'amount')
})
onActivated(() => {
  nextTick(() => {
    getCartList()
  })
})

const clickLeft = () => {
  router.go(-1)
}
const altGood = (it, item) => {
  item.name = item.invName
  altRef.value.altData(item)
}
const altSuc = () => {
  getCartList()
}
const getCartList = () => {
  tool.post('app/getCartList',{buId: route.query.buId}).then(ret => {
    state.cartList = ret.data
  })
}
const onSubmit = (it) => {
  let goods = it.goods.filter(row => {
    return row.checked === true
  })
  if (goods.length === 0) {
    return tool.warning('还没有选择商品')
  }
  let invoice = {
    buId: goods[0].buId,
    buName: goods[0].buName,
    infos: goods
  }
  tool.confirm('确定提交订单？','提交').then(() => {
    state.submitLoading = true
    setTimeout(() => {
      state.submitLoading = false
    }, 5000)
    tool.post('app/saveSale', invoice).then(ret => {
      if(ret.stat) {
        router.go(-2)
        setTimeout(() => {
          state.submitLoading = false
        }, 300)
      }
    })
  })
}
// 删除购物车商品
const deleteGood = (item) => {
  tool.post('app/delCartById', {
    id: item.id
  }).then(ret => {
    if(ret.stat) {
      getCartList()
    }
  })
}
const del = (it) => {
  showDialog({
    title: '确定删除',
    onOk:() => {
      tool.post('app/delCartByBuId', {buId: it.buId}).then(ret => {
        getCartList()
      })
    }
  })
}
const overlimit = (it, item, val) => {
  showDialog({
    title: '确定删除',
    onOk:() => {
      deleteGood(item)
    }
  })
}
// 改变数量
const onChange = (it, item, val) => {
  if(val) {
    item.qty = val
    item.amount = tool.xe.multiply(item.qty, tool.xe.subtract(item.price,item.deduction))
    it.amount = tool.xe.sum(it.goods, 'amount')
    tool.post('app/changeCart', {
      id: item.id,
      qty: item.qty,
    }).then(ret => {

    })
  }

}
const change = (it, item) => {
  tool.post('app/setCartChecked', {id: item.id, checked: item.checked}).then(ret => {
    let goods = it.goods.filter(row => {
      return row.checked === true
    })
    it.amount = tool.xe.sum(goods, 'amount')
  })
}


</script>

<style lang="less">
@import '@/common/style/mixin';
.cart-box {
  .cart-body {
    padding-top:5px;
    .good-item {
      display: flex;
      .good-img {
        padding: 2px 0;
      }
      .good-desc {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        padding: 5px;
        .good-title {
          font-size: 13px;
          font-weight: bold;
        }
        .qty {
          font-size:16px;
          padding-right:5px;
          color: #1e9fff;;
        }
        .good-btn {
          display: flex;
          justify-content: space-between;
          .price {
            font-size: 16px;
            color: red;
          }
          .van-icon-delete {
            font-size: 20px;
            margin-top: 4px;
          }
          padding-right:5px;
        }
      }
    }
    .delete-button {
      width: 50px;
      height: 100%;
    }
  }
  .empty {
    width: 100%;
    text-align: center;
    margin-top: 200px;
    .empty-cart {
      width: 150px;
      margin-bottom: 20px;
    }
    .van-icon-smile-o {
      font-size: 50px;
    }
    .title {
      font-size: 16px;
      margin-bottom: 20px;
    }
  }
  .submit-all {
    margin-bottom: 64px;
    .van-checkbox {
      margin-left: 10px
    }
    .van-submit-bar__text {
      margin-right: 10px
    }
    .van-submit-bar__button {
      background: @primary;
    }
  }
  .van-checkbox__icon--checked .van-icon {
    background-color: @primary;
    border-color: @primary;
  }
}

</style>
